<template>
  <el-container>
    <my-theme-card>
      <el-header>
        <my-title :title="edit?'武器修改':'武器添加'" />
      </el-header>
      <el-main>

        <el-tabs v-model="currentTabPane" type="border-card">
          <el-tab-pane label="装备信息" name="1">
            <el-form :model="tempWeapon" label-width="130px" :inline="true">
              <el-form-item label="名称">
                <el-input v-model="tempWeapon.name" />
              </el-form-item>
              <el-form-item label="编号">
                <el-input v-model="tempWeapon.number" />
              </el-form-item>
              <el-form-item label="图鉴类别">
                <el-select v-model="tempWeapon.illustration" placeholder="请选择" disabled>
                  <el-option
                    v-for="item in dir_illustration"
                    :key="item.id"
                    :label="item.label"
                    :value="item.data"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="类型">
                <el-cascader
                  v-model="tempWeapon.weaponType"
                  :options="weaponTypeOptions"
                  @change="weaponTypeHandleChange"
                />
              </el-form-item>
              <el-form-item label="负重">
                <el-input v-model="tempWeapon.weight" />
              </el-form-item>
              <el-form-item label="亲密度">
                <el-select v-model="tempWeapon.intimacy" placeholder="请选择">
                  <el-option
                    v-for="item in dir_intimacy"
                    :key="item.id"
                    :label="item.label"
                    :value="item.data"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="攻击力">
                <el-input v-model="tempWeapon.attackValue" />
              </el-form-item>
              <el-form-item label="射速">
                <el-input v-model="tempWeapon.handling" />
              </el-form-item>
              <el-form-item label="载弹量">
                <el-input v-model="tempWeapon.bullets" />
              </el-form-item>
              <el-form-item label="星级">
                <el-rate v-model="tempWeapon.star" :max="7" />
              </el-form-item>
              <el-form-item label="等级">
                <el-select v-model="tempWeapon.level" placeholder="请选择">
                  <el-option
                    v-for="item in dir_level"
                    :key="item.id"
                    :label="item.label"
                    :value="item.data"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="属性">
                <div style="height:36px;display:inline-flex;">
                  <el-input v-model="tempWeapon.attributeName" :class="{ 'el-input2':(tempWeapon.attributeIcon) }" @focus="chooseAttributeFocus" />
                  <img v-if="tempWeapon.attributeIcon" alt="属性" :src="baseUrl+tempWeapon.attributeIcon" style="margin-left:8px;width:36px;height:36px;border-radius: 4px;">
                </div>
              </el-form-item>
              <el-form-item label="系列">
                <div style="height:36px;display:inline-flex;">
                  <el-input v-model="tempWeapon.seriesName" :class="{ 'el-input2':(tempWeapon.seriesIcon) }" @focus="chooseSeriesFocus" />
                  <img v-if="tempWeapon.seriesIcon" alt="系列" :src="baseUrl+tempWeapon.seriesIcon" style="margin-left:8px;width:36px;height:36px;border-radius: 4px;">
                </div>
              </el-form-item>
              <el-form-item label="是否觉醒">
                <el-select v-model="tempWeapon.awakening" placeholder="请选择">
                  <el-option
                    v-for="item in dir_logic"
                    :key="item.id"
                    :label="item.label"
                    :value="item.data"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="tempWeapon.description" />
              </el-form-item>
            </el-form>

          </el-tab-pane>

          <el-tab-pane label="装备图片" name="2">
            <el-form label-position="top" label-width="80px">
              <el-form-item label="缩略图/主要是展示使用">
                <div style="display: inline-flex;">
                  <img
                    v-for="item in tempThumbnailImages"
                    :key="item.id"
                    alt="缩略图/主要是展示使用"
                    :src="baseUrl+item.url"
                    style="width:50px;height:50px;margin:0 5px 0 5px"
                    @click="removeThumbnailClick(item)"
                  >
                  <div class="image-choose" style="width:50px;height:50px;line-height:50px;margin:0 5px 0 5px" @click="chooseThumbnailClick">+</div>
                </div>
              </el-form-item>
              <el-form-item label="详情图/主要是详细图片">
                <div style="display: inline-flex;">
                  <img
                    v-for="item in tempDetailImages"
                    :key="item.id"
                    alt="详情图/主要是详细图片"
                    :src="baseUrl+item.url"
                    style="width:108px;height:192px;margin:0 5px 0 5px"
                    @click="removeDetailClick(item)"
                  >
                  <div class="image-choose" style="width:108px;height:192px;line-height:192px;margin:0 5px 0 5px" @click="chooseDetailClick">+</div>
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane v-if="if_animation" label="觉醒立绘" name="3">
            <el-button class="table-header-btn" type="primary" icon="el-icon-plus" size="mini" @click="chooseAnimationClick">选择</el-button>
            <template>
              <el-table :data="tempAnimation" stripe border style="width: 100%">
                <el-table-column prop="name" label="名称" width="180" />
                <el-table-column label="图片">
                  <template slot-scope="scope">
                    <img v-for="item in scope.row.thumbnails" :key="item.id" alt="缩略图" :src="baseUrl+item.url" style="width:50px;height:50px;">
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>

          <el-row style="text-align: center;margin-top:20px;">
            <el-button type="primary" @click="addAllTask">{{ edit ? '创 建':'添 加' }}</el-button>
            <el-button v-if="edit" type="primary" @click="editAllTask">修 改</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-row>
        </el-tabs>

      </el-main>

      <el-dialog title="属性选择" :visible.sync="dialogAttributeVisible" :close-on-click-modal="false" center :custom-class="dialog1" append-to-body>
        <attribute-list @attributeListClose="closeAttributeDialog" />
      </el-dialog>

      <el-dialog title="系列选择" :visible.sync="dialogSeriesVisible" :close-on-click-modal="false" center :custom-class="dialog1" append-to-body>
        <series-list @seriesListClose="closeSeriesDialog" />
      </el-dialog>

      <el-dialog title="立绘选择" :visible.sync="dialogAnimationVisible" :close-on-click-modal="false" center :custom-class="dialog1" append-to-body>
        <animation-list @animationListClose="closeAnimationDialog" />
      </el-dialog>

      <el-dialog :title="form.sourceChooseTitle" :visible.sync="dialogSourceVisible" :close-on-click-modal="false" center :custom-class="dialog1" append-to-body>
        <source-list @chooseSourceHandle="closeSourceDialog" />
      </el-dialog>
    </my-theme-card>
  </el-container>
</template>
<style>
  .image-choose{
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .image-choose:hover {
    border: 1px dashed #1a94d9;
  }
</style>
<script>
import request from '@/utils/request'
const attributeList = () => import('@/components/AttributeList/index')
const animationList = () => import('@/components/AnimationList/index')
const seriesList = () => import('@/components/SeriesList/index')
const sourceList = () => import('@/components/SourceList/index')
export default {
  name: 'Weapon',
  components: {
    attributeList,
    seriesList,
    sourceList,
    animationList
  },
  props: {
    row: {
      type: Object,
      default: () => {}
    },
    edit: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      weaponTypeOptions: [],
      dialog1: 'dialog1',
      form: {
        sourceChooseTitle: '缩略图选择'
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      tempWeapon: {
        illustration: 'arms'
      },
      tempThumbnailImages: [],
      tempDetailImages: [],
      tempAnimation: [],
      currentTabPane: '1',
      currentImageIndex: 'Thumbnail', // 当前选择的图片
      dialogAttributeVisible: false,
      dialogSeriesVisible: false,
      dialogSourceVisible: false,
      dialogAnimationVisible: false
    }
  },
  computed: {
    if_animation: function() {
      return (this.tempWeapon.awakening === '1')
    },
    dir_illustration: function() {
      return this.$store.state.directory.directory['illustration']
    },
    dir_level: function() {
      return this.$store.state.directory.directory['level']
    },
    dir_intimacy: function() {
      return this.$store.state.directory.directory['intimacy']
    },
    dir_logic: function() {
      return this.$store.state.directory.directory['logic']
    }
  },
  watch: {
    row: {
      handler: function(row) {
        if (row) {
          this.tempWeapon = row

          if (this.tempWeapon && this.tempWeapon.attribute_info) {
            this.tempWeapon.attributeName = this.tempWeapon.attribute_info.name
            this.tempWeapon.attributeIcon = this.tempWeapon.attribute_info.icon
          }
          if (this.tempWeapon && this.tempWeapon.series_info) {
            this.tempWeapon.seriesName = this.tempWeapon.series_info.name || ''
            this.tempWeapon.seriesIcon = this.tempWeapon.series_info.icon || ''
          }
          this.tempWeapon.weaponType = []
          this.tempWeapon.weapon_type1 ? this.tempWeapon.weaponType.push(this.tempWeapon.weapon_type1) : ''
          this.tempWeapon.weapon_type2 ? this.tempWeapon.weaponType.push(this.tempWeapon.weapon_type2) : ''
          this.tempThumbnailImages = this.tempWeapon.thumbnails || []
          this.tempDetailImages = this.tempWeapon.details || []
          this.tempAnimation = this.tempWeapon.animation ? [this.tempWeapon.animation] : []
        }
      },
      immediate: true
    },
    edit: {
      handler: function(edit) {
        this.edit = edit
        if (!edit) {
          this.tempWeapon = {}
          this.tempWeapon.illustration = 'arms'
        }
      },
      immediate: true
    }
  },
  created() {
    this.directoryUpdate()
    this.queryJsonDirectory()
  },
  methods: {
    weaponTypeHandleChange: function(val) {
      this.tempWeapon.weapon_type1 = val[0] || ''
      this.tempWeapon.weapon_type2 = val[1] || ''
    },
    directoryUpdate: function() {
      this.$store.commit('directory/setDirectory', 'illustration')
      this.$store.commit('directory/setDirectory', 'level')
      this.$store.commit('directory/setDirectory', 'intimacy')
      this.$store.commit('directory/setDirectory', 'logic')
    },
    // 立绘选择
    chooseAnimationClick: function() {
      this.dialogAnimationVisible = true
    },
    // 选择详情图点击事件
    chooseDetailClick: function() {
      this.currentImageIndex = 'Detail'
      this.form.sourceChooseTitle = '详情图选择'
      this.dialogSourceVisible = true
    },
    // 选择缩略图点击事件
    chooseThumbnailClick: function() {
      this.currentImageIndex = 'Thumbnail'
      this.form.sourceChooseTitle = '缩略图选择'
      this.dialogSourceVisible = true
    },
    removeThumbnailClick: function(image) {
      this.tempThumbnailImages = this.tempThumbnailImages.filter((t, n) => {
        return t.id !== image.id
      })
    },
    removeDetailClick: function(image) {
      this.tempDetailImages = this.tempDetailImages.filter((t, n) => {
        return t.id !== image.id
      })
    },
    // 属性选择事件
    chooseAttributeFocus: function() {
      this.dialogAttributeVisible = true
    },
    // 系列选择事件
    chooseSeriesFocus: function() {
      this.dialogSeriesVisible = true
    },
    closeAnimationDialog: function(ids, objs) {
      if (ids && objs) {
        this.tempAnimation = []
        objs.forEach((animation) => {
          this.tempAnimation.push(animation)
        })
      }
      this.dialogAnimationVisible = false
    },
    closeSourceDialog: function(ids, objs) {
      if (ids && objs) {
        objs.forEach((img) => {
          if (this.currentImageIndex === 'Detail') {
            this.tempDetailImages.push(img)
          } else {
            this.tempThumbnailImages.push(img)
          }
        })
      }
      this.dialogSourceVisible = false
    },
    closeAttributeDialog: function(ids, [{ id = '', name = '', icon = '' } = {}]) {
      this.tempWeapon.attribute = id
      this.tempWeapon.attributeName = name
      this.tempWeapon.attributeIcon = icon
      this.dialogAttributeVisible = false
    },
    closeSeriesDialog: function(ids, [{ id = '', name = '', icon = '' } = {}]) {
      this.tempWeapon.series = id
      this.tempWeapon.seriesName = name
      this.tempWeapon.seriesIcon = icon
      this.dialogSeriesVisible = false
    },
    cancel: function() {
      this.$emit('toChangePage', 'list')
    },
    // 查询json字典
    queryJsonDirectory: function() {
      request({
        url: '/preset/json_dictionary/queryJsonDictionaryByCode',
        method: 'post',
        data: {
          code: 'weapon_type'
        }
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          if (res.data) {
            this.weaponTypeOptions = JSON.parse(res.data.content) || []
          }
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => { this.$progress.done() })
    },
    // 添加装备任务
    addAllTask: function() {
      this.$progress.start()
      request({
        url: '/bengbeng/weapon/addAll',
        method: 'post',
        data: {
          weapon: this.tempWeapon,
          thumbnails: this.tempThumbnailImages,
          details: this.tempDetailImages,
          animations: this.tempAnimation
        }
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.cancel()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => { this.$progress.done() })
    },
    // 编辑装备任务
    editAllTask: function() {
      this.$progress.start()
      request({
        url: '/bengbeng/weapon/editAll',
        method: 'post',
        data: {
          weapon: this.tempWeapon,
          thumbnails: this.tempThumbnailImages,
          details: this.tempDetailImages,
          animations: this.tempAnimation
        }
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.cancel()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => { this.$progress.done() })
    }
  }
}
</script>
<style>
  .el-input {
    width: 180px;
  }
  .el-input2 {
    width: 137px;
  }
</style>
